<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            绑定事件
                1.内联模式
                2.外联模式/脚本模式(用的多)

            事件类型的种类：
                一：鼠标事件
                    click
                    dblclick
                    mouseover 经过子节点会重复触发
                    mouseout  经过子节点会重复触发
                    mousemove 鼠标移动，会不停的触发
                    mouseenter 经过子节点不会重复触发
                    mouseleave 经过子节点不会重复触发
                    mouseup   鼠标抬起
                    mousedown 鼠标按下
                二：键盘事件 (表单元素，全局window)
                    keydown 键盘按下(按下不放手，会一直触发)
                    keyup   键盘抬起
                    keypress 键盘按下(只支持字符键)
                三：HTML事件
                    1.window 事件
                        load
                        unload  当页面解构的时候触发(刷新页面，关闭当前页面)
                        scroll  页面滚动
                        resize  窗口大小变化的时候触发
                    2.表单事件
                        blur   失去焦点
                        focus  获取焦点
                        select 输入框内容选中文本的时候触发
                        change 当我们对输入框的文本进行修改并且失去焦点的时候
                    
                    必须添加在form元素上
                        submit
                        reset

            事件对象：
                button的属性
                    0 左键
                    1 滚轮
                    2 右键
                获取当前鼠标位置
                    clientX clientY   原点位置：可视窗口的左上角为原点
                    pageX   pageY     原点位置：整个页面的左上角(包含滚动出去的滚动距离)
                    screenX screenY   电脑屏幕的左上角
            对象事件类型：
                mouseover 让提示框显示
                mouseout  让提示框隐藏
                mousemove 让提示框跟随鼠标去移动(clientX clientY)
            修改键：
                shiftKey  按下shift，为true，默认是false
                altKey
                ctrlKey
                metaKey windows系统 按下windows键为true  macos系统 按下command键为true
                可以和别的操作进行组合
            键盘事件对象属性：
                keyCode键码   返回的是大写字母的ASCII码，不区分大小写
                which         只在keypress下支持  返回区分大小写的ASCII码值
            目标对象：
                target (IE8以下不兼容 window.event.srcElement)
                是事件对象的属性 这个对象谁起的就是谁 比如ul绑定的target 点击那个li就是指向那个li
            事件冒泡：(事件流)
                由里向外逐级触发
                阻止事件冒泡：cancelBubble = true     stopPropagation()
            事件捕获：
                由外向里逐级触发
            右键菜单：
                document.oncontextmenu
            阻止默认行为：preventDefault (window.event.returnValue = false)IE8以下
            
            事件委托：
                1.找到当前节点的父节点或者祖先节点
                2.将事件添加到你找到的这个父节点或者祖先节点上
                3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作
                可以解决  代码浪费和后添加的节点也有和之前的节点相同的操作
        */
       function btnClick(){
           alert("内联模式");
       }
       window.onload = function(){
           var Btn = document.getElementById('btn1');
           Btn.onclick = function(){
               alert("外联模式");
           }
       }
    </script>
</head>
<body>
    <button onclick='btnClick();'>内联模式</button>
    <button id="btn1">外联模式</button>
</body>
</html>